<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="75px">
      <el-form-item label="考试类型" prop="type" v-if="!type">
        <el-select v-model="queryParams.type.toString()" placeholder="请选择考试类型" clearable>
          <el-option v-for="dict in dict.type.kslx" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否合格" prop="hasPass">
        <el-select v-model="queryParams.hasPass" placeholder="请选择考试类型" clearable>
          <el-option v-for="dict in dict.type.ljsf" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!--    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['business:answerInfo:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['business:answerInfo:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['business:answerInfo:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['business:answerInfo:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>-->

    <el-table v-loading="loading" :data="answerInfoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键" align="center" prop="baseId" v-if="false" />
      <el-table-column label="用户账户" align="center" prop="createBy" />
      <el-table-column label="课程标题" align="center" prop="platformTitle" />
      <el-table-column label="试卷标题" align="center" prop="paperName" />
      <el-table-column label="得分" align="center" prop="score" />
      <el-table-column label="是否合格" align="center" prop="hasPass">
        <template slot-scope="scope">
          <el-tag :type="scope.row.hasPass ? 'success' : 'danger'" size="mini">
            {{ scope.row.hasPass ? '合格' : '不合格' }}
          </el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column label="考试证书" align="center" prop="userCertPath">
        <template slot-scope="scope">
          <div v-if="!scope.row.userCertPath">无</div>
          <el-button v-else size="mini" type="text" @click="preview(scope.row.userCertPath)">附件下载
          </el-button>
        </template>
      </el-table-column>-->
      <el-table-column label="考试用时" align="center" prop="durationName" />
      <el-table-column label="考试类型" align="center" prop="type">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.kslx" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="交卷时间" align="center" prop="type">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['business:answerInfo:edit']">试卷查看
          </el-button>
<!--          <el-button v-if="scope.row.type == 0" size="mini" type="text" icon="el-icon-trophy"
            @click="handleUpload(scope.row)">证书上传
          </el-button>
          <el-button v-if="scope.row.type == 0" size="mini" type="text" icon="el-icon-trophy"
            @click="handleDelete(scope.row)">证书删除
          </el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改答题管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="bu_platform表外键id" prop="platformId">
          <el-input v-model="form.platformId" placeholder="请输入bu_platform表外键id" />
        </el-form-item>
        <el-form-item label="提交的答案" prop="answer">
          <el-input v-model="form.answer" placeholder="请输入提交的答案" />
        </el-form-item>
        <el-form-item label="考试用时" prop="duration">
          <el-input v-model="form.duration" placeholder="请输入考试用时" />
        </el-form-item>
        <el-form-item label="考试类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio v-for="dict in dict.type.kslx" :key="dict.value" :label="parseInt(dict.value)">{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
<!--    <el-dialog title="上传证书" :visible.sync="openFile" width="500px" append-to-body>
      <el-form label-width="80px">
        <el-form-item label="上传附件">
          <fileUpload :limit="1" v-model="fileForm.cert" :fileType="['pdf','png','jpg','jpeg','doc', 'docx']" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFile">确 定</el-button>
        <el-button @click="openFile=false">取 消</el-button>
      </div>
    </el-dialog>-->
    <el-dialog title="试卷预览" :visible.sync="openPaper" width="50%" append-to-body>
      <div class="paper-area">
        <div class="pop-top">
          <img class="pass" v-if="chooseInfo.hasPass" src="@/assets/images/pass.png" alt="review-man">
          <img class="pass" v-else src="@/assets/images/fail.png" alt="review-man">
          <div style="margin-left: 20px;">
            <div>分数：
              <span :style="chooseInfo.hasPass?'color:green':'color:red'" class="score">{{ chooseInfo.score }}分</span>
            </div>
            <div>用时：<span class="score">{{ chooseInfo.durationName }}</span></div>
          </div>
        </div>
        <div class="paper-split"></div>
        <div v-for="(item,index) in paperSubjects" :key="index" class="question-area">
          <div class="subject-name">{{ index + 1 }}.
            <span v-if="item.type==0">【单选题】</span>
            <span v-if="item.type==1">【多选题】</span>
            {{ item.subjectName }}({{ item.subjectScore }}分)
          </div>
          <div v-if="item.type==0">
            <div v-for="(item1,index1) in item.paperSubjectOptions" :key="index1">
              {{ String.fromCharCode('A'.charCodeAt(0) + index1) + '.   ' + item1.optionName }}
            </div>
            <!-- <el-radio-group disabled v-model="radio">
      				<el-radio style="display:block;margin-bottom: 10px;"
      					v-for="(item1,index1) in item.paperSubjectOptions" :key="index1"
      					:label="item1.hasSelectThisOption">
      					{{ String.fromCharCode('A'.charCodeAt(0) + index1) + '.   ' + item1.optionName }}
      				</el-radio>
      			</el-radio-group> -->
            <div style="display: flex;align-items: center;margin: 6px 0;">
              <div>我的答案：<span style="font-family: Arial,sans-serif;color: blue;font-weight: bold;">{{
                  String.fromCharCode('A'.charCodeAt(0) + item.commitAnswer)
                }}</span>
              </div>
              <div style="margin-left: 20px;font-weight: 700;font-size: 22px;">
                <i style="color: limegreen;" v-if="item.trueOrFalse" class="el-icon-check"></i>
                <i style="color: red;" v-else class="el-icon-close"></i>
              </div>
            </div>
            <div style="color: red;">正确答案：{{ String.fromCharCode('A'.charCodeAt(0) + item.rightAnswer) }}
            </div>
            <div style="color: seagreen;margin-top: 10px;" v-if="item.analyzes">解析：{{ item.analyzes }}</div>
          </div>
          <div v-if="item.type==1">
            <div v-for="(item1,index1) in item.paperSubjectOptions" :key="index1">
              {{ String.fromCharCode('A'.charCodeAt(0) + index1) + '.   ' + item1.optionName }}
            </div>
            <!-- <el-checkbox disabled v-model="item1.hasSelectThisOption"
      				style="display:block;margin-bottom: 10px;"
      				v-for="(item1,index1) in item.paperSubjectOptions"
      				:key="index1">{{String.fromCharCode('A'.charCodeAt(0) + index1)+'.   '+item1.optionName}}</el-checkbox>
      			 -->
            <div style="display: flex;align-items: center;margin: 6px 0;">
              <div>我的答案：
                <span style="font-family: Arial,sans-serif;color: blue;font-weight: bold;"
                  v-for="(answer,i) in item.paperSubjectOptions"
                  :key="i">{{ answer.hasSelectThisOption ? String.fromCharCode('A'.charCodeAt(0) + i) : '' }}</span>
              </div>
              <div style="margin-left: 20px;font-weight: 700;font-size: 22px;">
                <i style="color: limegreen;" v-if="item.trueOrFalse" class="el-icon-check"></i>
                <i style="color: red;" v-else class="el-icon-close"></i>
              </div>
            </div>
            <div style="color: red;">正确答案：<span v-for="(answer,i) in item.paperSubjectOptions" :key="i">{{
                answer.trueOrFalse ? String.fromCharCode('A'.charCodeAt(0) + i) : ''
              }}</span>
            </div>
            <div style="color: seagreen;margin-top: 10px;" v-if="item.analyzes">解析：{{ item.analyzes }}</div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <!--            <el-button type="primary" @click="submitForm">提交</el-button>-->
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openPaper=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listAnswerInfo,
    getAnswerInfo,
    deleteCert,
    addAnswerInfo,
    updateAnswerInfo,
    addCert,
    answerPaperEcho
  } from "@/api/business/answerInfo";

  export default {
    name: "AnswerInfo",
    dicts: ['kslx', 'ljsf'],
    props: {
      platformId: {
        type: String,
        default: ""
      },
      createBy: {
        type: String,
        default: ""
      },
      type: {
        type: String,
        default: ""
      },
      activeName: {
        type: String,
        default: ""
      },
    },
    watch: {
      activeName: {
        handler: function(val, oldVal) {
          this.queryParams.platformId = this.platformId;
          this.queryParams.createBy = this.createBy;
          this.queryParams.type = this.type;
          if (val === 'seventy') {
            this.getList();
          }
        },
        immediate: true
      },
      createBy: {
        handler: function(val, oldVal) {
          this.queryParams.platformId = this.platformId;
          this.queryParams.createBy = this.createBy;
          this.queryParams.type = this.type;
          if (val === 'seventy') {
            this.getList();
          }
        },
        immediate: true
      },
    },
    data() {
      return {
        chooseInfo: {},
        paperSubjects: [],
        openPaper: false,
        openFile: false,
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 答题管理表格数据
        answerInfoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          hasPass: undefined,
          type: this.type,
          platformId: this.platformId,
          createBy: this.createBy,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          platformId: [{
            required: true,
            message: "bu_platform表外键id不能为空",
            trigger: "blur"
          }],
          answer: [{
            required: true,
            message: "提交的答案不能为空",
            trigger: "blur"
          }],
          duration: [{
            required: true,
            message: "考试用时不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "考试类型不能为空",
            trigger: "change"
          }],
        },
        fileForm: {
          userName: '',
          platformId: '',
          cert: ''
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询答题管理列表 */
      getList() {
        this.loading = true;
        listAnswerInfo(this.queryParams).then(response => {
          this.answerInfoList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          baseId: undefined,
          platformId: undefined,
          answer: undefined,
          score: undefined,
          hasPass: undefined,
          duration: undefined,
          type: undefined,
          delFlag: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          remark: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.baseId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加答题管理";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        answerPaperEcho(row.baseId).then(res => {
          this.chooseInfo = res.data
          this.paperSubjects = res.data.paperInfo.paperSubjects
          this.paperSubjects.map((item, index) => {
            if (item.type == 0) {
              item.commitAnswer = item.paperSubjectOptions.findIndex((arr) => arr
                .hasSelectThisOption)
              item.rightAnswer = item.paperSubjectOptions.findIndex((arr) => arr.trueOrFalse)
            } else {
              var commitAnswer = []
              var rightAnswer = []
              item.paperSubjectOptions.forEach((aa, sort) => {
                if (aa.hasSelectThisOption) {
                  commitAnswer.push(sort)
                }
                if (aa.trueOrFalse) {
                  rightAnswer.push(sort)
                }
              })
              item.commitAnswer = commitAnswer;
              item.rightAnswer = rightAnswer;
            }
          })
          this.openPaper = true
        })
      },
      preview(url) {
        window.open(url, "_blank");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.baseId != null) {
              updateAnswerInfo(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addAnswerInfo(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      handleUpload(row) {
        this.fileForm = {
          userName: row.createBy,
          platformId: row.platformId,
          cert: ''
        }
        this.openFile = true
      },
      handleDelete(row) {
        this.$modal.confirm("确定删除该条数据吗？").then(() => {
          deleteCert(row.certId).then(response => {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          });
        });
      },
      submitFile() {
        if (!this.fileForm.cert) {
          this.$modal.msgError("请上传附件！");
        } else {
          addCert(this.fileForm).then(response => {
            this.$modal.msgSuccess("上传成功");
            this.openFile = false
            this.getList();
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('business/answerInfo/export', {
          ...this.queryParams
        }, `answerInfo_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .paper-area::-webkit-scrollbar {
    width: 5px;
    height: 10%
  }

  .paper-area::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;

  }

  /* 滚动条的滑轨背景颜色 */
  .paper-area::-webkit-scrollbar-thumb {
    background-color: #A4A9C1;
    border-radius: 10px;
  }

  .paper-area {
    background-color: #FFF;
    padding: 0 15px;
    max-height: 700px;
    overflow-y: scroll;

    .paper-title {
      text-align: center;
      font-weight: 600;
      font-size: 17px;
      margin-bottom: 20px;
    }

    .paper-split {
      width: 100%;
      height: 5px;
      background-color: #53A4F4;
      margin: 15px 0;
    }

    .question-area {
      margin-bottom: 25px;

      .subject-name {
        margin-bottom: 10px;
      }

      .option-item {
        margin-left: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .pop-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .pass {
      width: 80px;
      height: 80px;
    }

    .score {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FA8936;
    }
  }
</style>
